{% extends 'base.html' %}
{% block body %}
			<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
				<ol class="carousel-indicators">
					{% for i in banners %}
						<li data-target="#carouselExampleIndicators " data-slide-to="{{loop.index0}}" {% if loop.index0 == 0 %} class="active" {% endif %}></li>
					{% endfor %}
				</ol>
				<div class="carousel-inner">
					{% for i in banners %}

					<div class="carousel-item {% if loop.index0 == 0 %}active{% endif %}">
						<img src="{{i.images_url}}" class="d-block w-100" alt="...">
					</div>
					{% endfor %}
				</div>
				<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
			    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </button>
				<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
			    <span class="carousel-control-next-icon" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </button>
			</div>
		</div>
		<div class="w1280">
				<img src="/static/bootstrap4/img/t01.jpg" />
		</div>
		<div class="w1280 mg_bottom">
			<div class="index_industry_list clear">
				<ul>
					{% for i in  industry_application %}
					<li>
						<a href="{{i.url}}">
						<h1>
							{{i.title}}
						</h1>
						<div>
							<img src="{{i.images_url}}" />
						</div>
						<div class="text_box">
							<p>
								<a href="{{i.url}}">
									{{i.description}}
								</a>

							</p>
						</div>
						</a>
					</li>
					{% endfor %}
				</ul>
			</div>

		</div>
		<div class="w1280 mg_bottom">
				<img src="/static/bootstrap4/img/t02.jpg" />
		</div>
		{% for i in product_type_index_list %}
			<div class="w1280 index_product_box">
				<h1>
					{{i.name}}
				</h1>
				<h2>
					{{i.description}}
				</h2>
				<div class="index_product_list clear">
					<ul>
						{% for k in i.index_product_list %}
						<li>
							<div>
								<img src="{{k.small_images_url}}" />
							</div>
							<h3>
								<a href="/product_parm/{{k.id}}">{{k.name}}</a>
							</h3>
						</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		{% endfor %}
		<div class="about_bg">
			<div class="index_about w1400 clear piece">
				<div class="left about_text">
				<h1>
					关于吉派
				</h1>
				<h2>
					GPTECH 于2014年成立吉派流体控制技术（上海）有限公司，公司在上海拥有3000多平米的研发及装配一体工厂，并于2017年在江苏太仓建设13000平米研发生产工厂，且分别建有1000平米CLASS1000无尘室和500平米CLASS100的无尘室，以满足半导体行业和生物制药行业对流体控制系统产品高洁净度的要求。
</h2><h2>公司拥有50余台世界一流的精密CNC加工设备，自动焊接设备及专门研发订制的各种装配设备和泄漏测试设备。GPTECH主要以研发生产半导体高纯特气控制设备，高纯化学品输送设备，气体控制阀和手动阀等产品为主。
				</h2>
				<div class="img">
					{% for i in about_small %}
						<img src="{{i.images_url}}"/>
					{% endfor %}
				</div>
			</div>
				<div class="about_img">
				<img src="{{about_big.0.images_url}}">
				</div>
			</div>

		</div>
		<div class="w1400 text_center mg_bottom">
			<img src="/static/bootstrap4/img/t03.jpg">
		</div>
		<div class="w1400 technology">
			<ul class="clear">
				{%for i in technical_skills %}
				<li>
					<a href="{{i.url}}">
					<div class="img_box">
						<div class="img">
							<img src="{{i.images_url}}" />
						</div>
						<div class="img_hover">
							<img src="{{i.hover_images_url}}" />
						</div>
					</div>
					<h1>
						{{i.title}}
					</h1>
					<h2>
						<a href="{{i.url}}">
							{{i.description}}
						</a>
					</h2>
					</a>
				</li>
				{% endfor %}
			</ul>
		</div>
		<div class="index_connect_bg">
			<div class="w1400 index_connect clear">
				<div class="left index_connect">
						<h1>
							联系我们
						</h1>
						<input type="text" name="name" id="name" value="" placeholder="输入姓名"/>
						<input type="tel" name="phone" id="phone" value="" placeholder="输入电话"/>
						<textarea class="area" onfocus="if(value=='需要咨询的问题'){value=''}"  onblur="if (value ==''){value='需要咨询的问题'}" name="description"
							id="description"
						>需要咨询的问题</textarea>


						<button type="submit" onclick="index_connect(this)">
							提交
						</button>
				</div>
				<div class="left" id="container" style="width:660px;height:370px;">

				</div>
			</div>
		</div>
<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'97cc1dd127ee26bb2ae933f5a4cf69fd',
        }

</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ff74dcb8bca60e7199448f7c928d7268"></script>
<style>
    .amap-marker-label{
        border:0px;
        font-size:14px;
        font-weight:bold;
    }
</style>
<script>
	function checkPhone(phone){
		if(!(/^1[3456789]\d{9}$/.test(phone))){
			return false;
		}
		return true;
	}
	function index_connect(btn){
        var name = $(btn).siblings('#name').val();
        var phone = $(btn).siblings('#phone').val();
        check = checkPhone(phone)
        if(!check){
        	alert("手机号码有误，请重填");
        	return false;
        }
        var description = $(btn).siblings('#description').val();
        var data = {
            'name':name,
            'phone':phone,
            'description':description
        }
        console.log(data)
        $.ajax({
          type: 'POST',
          url: '/index_connect',
          data: data,
          success: function(rtn){
            if(rtn.status == "success"){
            	alert("提交成功");
            }
          }
        });
    }
    var map = new AMap.Map('container', {
            zoom:14,//级别
            center: [121.492163,30.902236],//中心点坐标
            viewMode:'3D'//使用3D视图
        });
    var marker = new AMap.Marker({
            position: new AMap.LngLat(121.492163,30.902236),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: 'GPTECH 上海研发中心'
        });
        marker.setLabel({
            offset: new AMap.Pixel(-30, 30),  //设置文本标注偏移量
            content: "<div>GPTECH 上海研发中心</div>", //设置文本标注内容
            direction: 'right' //设置文本标注方位
        });
        map.add(marker);
        AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){//异步同时加载多个插件
          var toolbar = new AMap.ToolBar();
          map.addControl(toolbar);

          var scale = new AMap.Scale();//驾车路线规划
          map.addControl(scale);

      });
</script>
{% endblock %}